<template>
  <div class="menu-set-box" v-loading="loading">
    <div class="top">
      <el-checkbox v-model="checkedAll"
                   @change="changeSelectAllTree">
        {{ checkedAll ? '全否' : '全选' }}
      </el-checkbox>
      <el-button type="primary"
                 :loading="saveLoading"
                 size="small"
                 @click="savePerm">
        <i v-if="!saveLoading" class="el-icon-circle-plus-outline"></i><span>保 存</span>
      </el-button>
    </div>

    <div class="tree">
      <div class="menu"
           v-for="(item, index) in treeList"
           :key="index">
        <div class="menu-head">
          <el-checkbox v-model="item.allChecked"
                        @change="changeSelectAll($event, index)">
            {{ item.allChecked ? '全否' : '全选' }}
          </el-checkbox>
          <span><i :class="item.icon"/> {{ item.topMenuName }}</span>
        </div>
        <el-tree
          :data="item.children"
          :ref="treePerf+index"
          node-key="id"
          default-expand-all
          show-checkbox
          check-strictly
          check-on-click-node
          :default-checked-keys="checkedArr"
          >
          <span slot-scope="{ node, data }">
            <i :class="data.icon"/>
            <span> {{ data.menuName }} </span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  name: 'menuPermissions',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    treeList: {
      type: Array,
      default: () => ([])
    },
    checkedArr: {
      type: Array,
      default: () => ([])
    },
    saveLoading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      page: {
        pageNo: 1,
        pageSize: 1000
      },
      data: [],
      checkedAll: false, // 总的全选
      treePerf: 'MenuTree-',
      menuTreeKeys: [],
      allKeys: []
    }
  },
  methods: {
    changeSelectAllTree (checked) {
      // 总的全选
      this.treeList.map((item, index) => {
        if (checked) {
          item.allChecked = true
          this.changeSelectAll(true, index)
        } else {
          item.allChecked = false
          this.changeSelectAll(false, index)
        }
      })
    },
    changeSelectAll (checked, index) {
      const checkedKeys = []
      if (checked) {
        this.treeList[index].allChecked = true
        this.treeList[index].children.map(item => {
          checkedKeys.push(item.id)
        })
      }
      this.treeList[index].allChecked = checked
      const refName = this.treePerf + index
      this.$refs[refName][0].setCheckedKeys(checkedKeys)
    },
    savePerm () {
      // 保存提交
      let allSelectKeys = []
      // 获取所有选中、半选中节点
      this.treeList.map((treeData, index) => {
        const selectKeys = this.$refs[this.treePerf + index][0].getCheckedKeys()
        allSelectKeys = allSelectKeys.concat(selectKeys)
      })
      this.$emit('handleMenuSubmit', allSelectKeys)
    }
  }
}
</script>

<style lang="scss" scoped>
  .menu-set-box {
    background: #e9e9e9;

    .top, .menu-head {
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #000;
    }
  }

  .tree {
    overflow-y: auto;
    height: calc(100vh - 134px);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 5px 10px;

    .top {
      width: 100%;
    }

    .menu {
      margin: 10px 5px;
      padding: 10px 0;
      width: 260px;
      background: #fff;
      border-radius: 5px;
    }
  }

</style>
